.footer-bar {
    box-sizing: border-box;
    padding: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.container {
    padding: 5rpx 10rpx;
    width: 187.5rpx;

    .content {
        width: 100%;
        height: 235rpx;
        border: 4px solid var(--color-light);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-self: center;
        position: relative;

        .card-image {
            display: inline-flex;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        .card-counter {
            display: inline-flex;
            height: 1.2rem;
            width: 1.2rem;
            bottom: 0;
            left: 0;
            position: absolute;
            background: rgba($color: #000000, $alpha: 0.6);
            color: white;
            font-size: 0.8em;
            justify-content: center;
            align-self: center;
        }

        .card-counter.status {
            height: 1.2rem;
            width: 100%;
            font-size: 0.9em;
            color: #000;
            background: rgba($color: #ffc409, $alpha: 0.6);
        }

        .card-counter.status.active {
            background: rgba($color: #2dd36f, $alpha: 0.6);
        }
    }

    .text {
        justify-content: center;
        align-self: center;
        display: inline-flex;
        font-size: 0.9rem;
        color: var(--color-medium);
    }

    .content.selected {
        border-color: var(--color-danger);
    }
}

.container.sm {
    padding: 10rpx;
    width: 150rpx;

    .content {
        height: 182rpx;
        border: 3px solid var(--color-dark);
    }

    .content.selected {
        border-color: var(--color-danger);
    }
}

.container.function {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    .content {
        font-size: 0.9em;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border: none;
        height: 100rpx;
        color: white;
        text-align: center;
        background: linear-gradient(to bottom, #999, #333);
    }

    .content.danger {
        background: linear-gradient(to bottom, #d8808c, #eb445a);
    }

    .content.warning {
        background: linear-gradient(to bottom, #ffc409, #bb9108);
    }
}

.container.success {
    .content {
        background: linear-gradient(to bottom, #1fa053, #2dd36f);
    }
}


.preview {
    background: linear-gradient(#333, #555);
    padding: 0.5rem 0;

    .header {
        padding-left: 1rem;
        color: white;
        font-size: 1em;
        margin-bottom: 0.5rem;
    }

    .container {
        padding: 6rpx;

        .content {
            height: 245rpx;
            border: 2px solid white;
        }

        .content.selected {
            border-color: var(--color-success);
        }
    }

    .action-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 0.5rem;
    }
}


.popup-card-detail {
    --td-popup-bg-color: rgba(255, 255, 255, 0);
}